<template>
  <view class="page">
    <text>按科室挂号</text>
  </view>
</template>

<template>
  <view class="page">
    <view class="container">
      <!-- 搜索框 -->
      <view class="search-box">
        <input
            class="search-input"
            type="text"
            v-model="searchQuery"
            placeholder="搜索科室、疾病、医院"
            confirm-type="search"
            @confirm="onSearch"
        />
        <text class="iconfont search-icon">&#xe6d4;</text>
      </view>

      <!-- 我的挂号记录 -->
      <view class="record-section" @click="navigateTo('record')">
        <view class="record-left">
          <image src="/static/record-icon.png" class="record-icon"></image>
          <text class="record-text">我的挂号记录</text>
        </view>
        <view class="record-right">
          <text class="view-text">查看</text>
          <text class="iconfont">&#xe601;</text>
        </view>
      </view>

      <!-- 常见科室 -->
      <view class="common-department-section">
        <text class="section-title">常见科室</text>
        <view class="department-list">
          <view
              class="department-item"
              v-for="(item, index) in commonDepartments"
              :key="index"
              @click="navigateToHospitalList(item.id)"
          >
            <image :src="item.icon" class="department-icon"></image>
            <text class="department-name">{{ item.name }}</text>
          </view>
        </view>
      </view>

      <!--全部科室 -->
      <view class="all-department-section">
        <text class="section-title">全部科室</text>
        <view class="department-container">
          <!--一级科室滑动组件 -->
          <scroll-view class="first-level" scroll-y>
            <view
                v-for="(item, index) in firstLevelDepartments"
                :key="item.id"
                :class="['first-level-item', selectedFirstLevelId === item.id ? 'active' : '']"
                @click="selectFirstLevel(item.id)"
            >
              <image :src="item.icon" class="first-level-icon"></image>
              <text class="first-level-name">{{ item.name }}</text>
            </view>
          </scroll-view>

          <!-- 二级科室 -->
          <scroll-view class="second-level" scroll-y>
            <view
                v-for="(subItem, index) in secondLevelDepartments"
                :key="subItem.id"
                class="second-level-item"
                @click="navigateToHospitalList(subItem.id)"
            >
              <text>{{ subItem.name }}</text>
              <text v-if="selectedSecondLevelId === subItem.id" class="iconfont">&#xe601;</text>
            </view>
          </scroll-view>
        </view>
      </view>

    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      // 一级和二级科室数据
      firstLevelDepartments: [],
      selectedFirstLevelId: 1,
      selectedSecondLevelId: null,

      // 常见科室数据
      commonDepartments: [
        {id: 1, name: '呼吸内科', icon: '/static/record-icon.png'},
        {id: 2, name: '消化内科', icon: '/static/record-icon.png'},
        {id: 3, name: '儿科', icon: '/static/record-icon.png'},
        {id: 4, name: '妇科', icon: '/static/record-icon.png'},
        {id: 5, name: '神经外科', icon: '/static/record-icon.png'},
      ],
    };
  },
  computed: {
    //动态获取当前选中一级科室的二级科室
    secondLevelDepartments() {
      const selected = this.firstLevelDepartments.find(item => item.id === this.selectedFirstLevelId);
      return selected ? selected.subDepartments : [];
    },
  },
  methods: {
    onSearch() {
      uni.showToast({
        title: `搜索内容：${this.searchQuery}`,
        icon: 'none',
      });
    },
    navigateTo(type) {
      uni.navigateTo({
        url: `/pages/registrations/${type}/${type}`,
      });
    },
    // 选择一级科室
    selectFirstLevel(id) {
      this.selectedFirstLevelId = id;
    },
    // 点击二级科室跳转到医院列表
    navigateToHospitalList(departmentId) {

      uni.navigateTo({
        url: `/pages/registrations/hospital-list/hospital-list?departmentId=${departmentId}`,
      });
    },
    getDepartmentList(){
      uni.request({
        url:'http://localhost:8080/app/registration/listDepartment',
        success:result => {
          console.log(result)
          if (result.statusCode==200){
            this.firstLevelDepartments = result.data.rows;
            console.log(this.firstLevelDepartments)
          }
        }
      })
    }
  },
  created() {
    this.getDepartmentList()
  }
};
</script>

<style scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20rpx;
}

/* 容器样式 */
.container {
  width: 100%;
  padding: 20rpx;
}

/* 搜索框样式 */
.search-box {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
}

.search-input {
  flex: 1;
  padding: 0 20rpx;
  font-size: 28rpx;
}

.search-icon {
  font-size: 36rpx;
  margin-left: 20rpx;
  color: #999;
}

/* 我的挂号记录样式 */
.record-section {
  margin-top: 40rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.record-left {
  display: flex;
  align-items: center;
}

.record-icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.record-text {
  font-size: 28rpx;
  color: #333;
}

.record-right {
  display: flex;
  align-items: center;
}

.view-text {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}

/* 常见科室样式 */
.common-department-section {
  margin-top: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.department-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.department-item {
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30rpx;
}

.department-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 10rpx;
}

.department-name {
  font-size: 26rpx;
  color: #333;
}
/* 全部科室样式 */
.all-department-section {
  margin-top: 40rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.department-container {
  display: flex;
}

/*一级科室滑动样式 */
.first-level {
  width: 30%;
  height: 600rpx;
  overflow-y: auto;
  border-right: 1rpx solid #eee;
}

.first-level-item {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #666;
}

.first-level-item.active {
  color: #007aff;
}

.first-level-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.first-level-name {
  font-size: 26rpx;
}

.second-level {
  width: 70%;
  height: 600rpx;
  overflow-y: auto;
  padding: 20rpx;
}

.second-level-item {
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f0f0f0;
}
</style>
